Skip to main content

第一篇：基本介绍

[TOC]

第一篇：基本介绍

引入​

<script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>

使用​

<script>
    new Vue({
    el:'#aa',
    data:{
              msg:'aaaaa',
              firstName:'',
              lastName:'',
              count:0
         }
    }),
     methods:{
         //定义函数
         handleClick:function(){
             alert(234)
             this.msg ="vvvvvv"
         }
     },
     computed:{
         fullName:function(){
             return this.firstName + ' '+this.lastName
         }
     },
     watch:{
         firstName:function(){
             this.count++
         },
         lastName:function(){
             this.count++
         }
     }
     
</script>

挂载点就是 id='aa'的dom元素

模板是 dom元素里的内容

实例就是页面通过new vue显示出的效果

{{ }} 叫做 插值表达式

methods 里面是定义函数的

数据绑定​

  • ==v-model== 可以实现数据的双向绑定

  • ==computed 计算属性(数据联动)== 设置变量，变量中有设置到的成员变量改变，这个设置的变量就会发生改变 -- 监听可以是很多个，但必须都是Vue实例中的变量

  • ==watch 监听器(异步场景)== 监听设置的变量，变量改变会触发 -- 监听的是一个变量

元素​

  • v-text 内容由v-text后面指定的变量指定 会转义html
  • v-once 指令 执行一次性地插值，当数据改变时，插值处的内容不会更新
  • v-html 指令：把字符串转成 html

v-bind指令​

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

:class="['active','add',{'another':true}]"

v-bind 缩写​

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写​

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

条件渲染​

v-if
v-else-if
v-else

<div v-if="num == 1">等于1</div>
<div v-else>不等于0</div>
<p v-if="seen">现在你看到我了</p>

循环语句 v-for​

<div v-for="vo of list">{{vo.name}}:{{vo.age}}</div>
list:[{name:'xxx',age:'35'},{name:'www',age:'23'}]
//输出下标的形式
<div v-for="(item,index) of list" :key='index'>{{vo.name}}:{{vo.age}}</div>

v-show与v-if的区别​

v-show是修改display:none的样式，v-if是是否存在这个dom